<template>
    <footer class="footer">
      <!-- This should be `0 items left` by default -->
      <span class="todo-count">剩余<strong>{{ shengyu }}</strong></span>
      <!-- Remove this if you don't implement routing -->
      <ul class="filters">
        <li>
          <a :class="{ selected: flag === 1 }" @click="$emit('changeFlage', 1)" class="selected" href="#/">全部任务</a>
        </li>
        <li>
          <a :class="{ selected: flag === 2 }" @click="$emit('changeFlage', 2)" href="#/active">进行中</a>
        </li>
        <li>
          <a :class="{ selected: flag === 3 }" @click="$emit('changeFlage', 3)" href="#/completed">已完成</a>
        </li>
      </ul>
      <!-- Hidden if no completed items are left ↓ -->
      <button class="clear-completed" @click="$emit('clearCompleted')">清除已完成</button>
    </footer>
</template>

<script>
export default {
  props: {
    list: Array,
    // flag: {
    //   requierd: true,
    //   type: Number
    // }
    flag: Number
  },
  //  计算属性
  computed: {
    shengyu () {
      //  return '计算的结果'
      return this.list.filter(item => item.isDone === false).length
    }
  }
}
</script>

<style>

</style>